import React, { Component } from 'react';
import { HomeWrapper, HomeLeft, HomeRight, Top } from './style'
import { connect } from 'react-redux'
import { actionCreators } from './store'
import TopPic from './components/TopPic'
import List from './components/List'
import Writer from './components/Writer'
import Recommend from './components/Recommend'

class Home extends Component {
    render() {
        return (
            <HomeWrapper>
                <HomeLeft>
                    <img className='banner-img' alt='' src="//upload.jianshu.io/admin_banners/web_images/4318/60781ff21df1d1b03f5f8459e4a1983c009175a5.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
                    <TopPic></TopPic>
                    <List></List>
                </HomeLeft>
                <HomeRight>
                    <Recommend></Recommend>
                    <Writer></Writer>
                </HomeRight>
                {this.props.showScroll ? <Top onClick={this.clickTop}>顶部</Top> : ''}
            </HomeWrapper>
        );
    }

    componentDidMount() {
        this.props.changeData()
        this.bindEvents()
    }

    clickTop = () => {
        window.scroll(0, 0)
    }

    bindEvents() {
        window.addEventListener('scroll', this.props.changeScrollTopShow);
    }

    removeEvents(){
        window.removeEventListener('scroll', this.props.changeScrollTopShow);
    }
}

const mapState = (state) => {
    return {
        showScroll: state.getIn(['home', 'showScroll'])
    }
}


const mapDispatch = (dispatch) => {
    return {
        changeData() {
            dispatch(actionCreators.getData())
        },
        changeScrollTopShow() {
            if (document.documentElement.scrollTop > 100) {
                dispatch(actionCreators.toggleTopShow(true))
            } else {
                dispatch(actionCreators.toggleTopShow(false))
            }
        }

    }
}

export default connect(mapState, mapDispatch)(Home);